<html>
<head id="head">
  <title>ver/sus</title>
  <style type="text/css">

body { 
  margin: 0; padding: 0; font-family: sans-serif; 
  background-color: #EEE;
}

div#header {
  position: absolute; top: 0; width: auto; height: auto; margin: 0 auto; 
  left: 0; right: 0;
}

div#header h1 {
  display:inline; text-align: left;
  margin: 0; padding: 0.1em; 
  /*color: #444499; background-color: #CCCCFF;  */
  /* border: solid blue; border-width: 0 2px 2px 2px; */
}

div#userbar {
  font-size: smaller;
  position: absolute; top: 0; right: 0; padding: 0.3em;
  width: auto; height: auto;
}

h2 { padding: 0.2em; margin: 0; text-align:center; }

#newlabel {
  position: absolute; width: auto; height: auto;
  right: 0; left: 20em; bottom: 0; 
  text-align: center;
  padding: 0; margin: 0;
}

#grid {
  position: absolute; height: auto; width: auto;
  top: 2em; right: 0; left: 24em; bottom: 0; 
  margin: 0; padding: 2em 2em 3em 2em; 
  border: solid black; border-width: 2px 0 0 2px;
  background-color: #8A8;
}

#controlbar {
  position: absolute; width: 20em; height: auto;
  left: 0; bottom: 0;  top:2em;
  margin: 0; padding: 2em 2em 2em 2em; 
  border: solid black; border-width: 2px 2px 0 0;
  background-color: white;
  overflow: auto;
}

#controlbar p {
  margin: 0 1em 0.3em 1em; padding: 0; 
  font-size: smaller;
}

.mygrid { font-weight: bold; }

#taglist { 
  max-height: 10em; overflow: auto; text-align: center; 
  padding: 0 0 1em 0;
}
#taglist span { vertical-align: middle; }
#taglist a { text-decoration: none; color: blue; }

#build, #taglist, #about {
  background-color: silver; border: 2px solid gray; 
  padding: 0.3em; margin: 0 0 1em 0; 
}
form#build { text-align: center; }
input.text { border: 2px solid black; background-color: #FFFFCF; margin: 1px; padding: 2px; color:
gray; }
form#build input.submit { margin: 0.2em; }
/*
.top { width: 100%; border: dashed silver; border-width: 0 0 2px 0; }
.bottom { width: 100%; margin: 2px; border: 2px solid green; }
.left { width: 49%; border: dashed silver; border-width: 0 2px 0 0; padding: 1em; float: left;}
.right { width: 50%; padding: 1em; border: 2px solid yellow; float: right;}
*/


div#icons {
  position: absolute;  width: auto; height: auto;
  bottom: 0; right: 0; 
  text-align: right;
}

  </style>
  <script type="text/javascript">
_ = function(id) {
  return document.getElementById(id);
};

// from input names to the helpful text we show there when they're unfocussed.
var inputHelpMap = {};

function init() {
  // TODO: get rid of this 9?
  //_("taglist").style.height = _("build").clientHeight - 9;
  _("newPoint").onchange = addPoint;

  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    if (input.type == "text") {
      inputHelpMap[input.name] = input.value;
      input.onfocus = handleFocus;
      input.onblur = handleBlur;
    }
  }

  _("build").onsubmit = function(e) {
    inputs = _("build").getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      if (input.type == "text") {
        if (input.style.color != "black" || 
            input.value == "" ||
            input.value == "fill me in!") {
          alert("Sorry, you're actually going to have to fill out the form.  We know, life's tough.");
          input.focus();
          input.style.color = "";
          input.value = "fill me in!";
          return false;
        }
      }
    }
    return true;
  };

};

function addPoint(e) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "/Point/{{ id }}?label=" + escape(e.target.value);
  _("head").appendChild(script);
  e.target.value = "new label";
}

function handleSubmit() {
  // reload iframe
  _("grid").src = _("grid").src;
}

function handleFocus(e) {
  // we basically use the color as the marker for whether it's showing the help
  // text or actual input text
  if (e.target.style.color != "black") {
    e.target.value = "";
    e.target.style.color = "black";
  }
  return true;
}

function handleBlur(e) {
  if (e.target.value == "") {
    // restore the help text and mark as unedited
    e.target.value = inputHelpMap[e.target.name];
    e.target.style.color = "";
  } 
  return true;
}

  </script>
</head>

<body onload="init();">
<div id="header"><h1><span style="position: relative; top: -0.2em;">ver</span>/sus
- {{ grid }} </h1></div>

<div id="userbar">
  <b>{{ user }}</b> | 
  <a href="{{ logout }}">Sign Out</a>
</div>

<iframe id="grid" src="/Grid/{{ id }}"></iframe>

<div id="newlabel">
  <input class="text" type="text" name="point" size="12" value="new label" id="newPoint">
</div>

<div id="controlbar">

  <form method="POST" action="/Create" id="build">
    <h2>build</h2>
    <input class="text" type="text" size="15" name="title" value="title" style="text-align:center;font-size:large;"><br>
    <input class="text" type="text" size="8" name="top" value="top" style="text-align:center;"><br>
    <input class="text" type="text" size="8" name="left" value="left" style="text-align:right;">
    &#x253C;
    <input class="text" type="text" size="8" name="right" value="right" style="text-align:left;"><br>
    <input class="text" type="text" size="8" name="bottom" value="bottom" style="text-align:center;"><br>
    <input class="submit" type="submit" name="build" value="create" style="text-align:center;"><br>
  </form>

  <div id="taglist">
    <h2>list</h2>
  <!-- TODO -->
  <!--
    <span style="font-size:small">foo/bar</span>
    <span style="font-size:large">foo/bar</span>
    <span style="font-size:medium">foo/bar</span>
    <span style="font-size:xx-large">foo/bar</span>
    <span style="font-size:xx-small">foo/bar</span>
    <span style="font-size:small">foo/bar</span>
    <span style="font-size:x-small">foo/bar</span>
    <span style="font-size:large">foo/bar</span>
    <span style="font-size:x-small">foo/bar</span>
    <span style="font-size:xx-large">foo/bar</span>
    <span style="font-size:xx-small">foo/bar</span>
    <span style="font-size:small">foo/bar</span>
    <span style="font-size:large">foo/bar</span>
    <span style="font-size:medium">foo/bar</span>
    <span style="font-size:x-small">foo/bar</span>
    <span style="font-size:xx-small">foo/bar</span>
    <span style="font-size:small">foo/bar</span>
    <span style="font-size:medium">foo/bar</span>
    <span style="font-size:xx-large">foo/bar</span>
    <span style="font-size:large">foo/bar</span>
    <span style="font-size:x-small">foo/bar</span>
    <span style="font-size:xx-large">foo/bar</span>
    <span style="font-size:medium">foo/bar</span>
    <span style="font-size:medium">foo/bar</span>
    <span style="font-size:xx-small">foo/bar</span>
    <span style="font-size:small">foo/bar</span>
    <span style="font-size:large">foo/bar</span>
    <span style="font-size:x-small">foo/bar</span>
    <span style="font-size:medium">foo/bar</span>
    <span style="font-size:xx-large">foo/bar</span>
    <span style="font-size:xx-small">foo/bar</span>
  -->
    {% if allgrids %}
    {% for grid in allgrids %}<a href="/Versus/{{grid.id}}"{% if grid.mine %} class="mygrid"{% endif %}>{{grid.title}}</a>
    | {% endfor %}
    {% endif %}
  </div>

  <div id="about"> 
    <h2>about</h2>
    <p>At work, we draw big grids on the whiteboard, with axes like "light
    to heavy, ugly to cute" and then plot "hamster", "panda", "slug" and
    "hippopotamus" on it.  <a href="mailto:rob@infinitepigeons.org">author</a></p>
  </div>

</div>

<div id="icons">
  <img src="http://www.w3.org/Graphics/SVG/logo/tmpSVGlogo.png" alt="Powered by
  Scalable Vector Graphics" /><br>
  <img src="http://code.google.com/appengine/images/appengine-silver-120x30.gif"
  alt="Powered by Google App Engine" />
</div>

</body>
</html>
